<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="9">
          <el-input clearable v-model="queryInfo.query" placeholder="请输入货位名" prefix-icon="el-icon-search">
            <el-button slot="append" icon="el-icon-search" @click="getLocationList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addLocationDialog">新增</el-button>
        </el-col>
      </el-row>
      <el-table :data="locationList.slice((queryInfo.pageNum-1)*queryInfo.pageSize,queryInfo.pageNum*queryInfo.pageSize)"
      style="width: 100%"
      stripe border fixed height="500">
          <el-table-column
            fixed="left"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="name"
            label="货位名称">
          </el-table-column>
          <el-table-column
            prop="locationId"
            label="货位编号">
          </el-table-column>
          <el-table-column
            prop="type"
            label="货位类型">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
          </el-table-column>
          <el-table-column
            prop="storehouse"
            label="所属仓库">
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="operate"
            label="操作"
            width="180">
            <template slot-scope="scope" >
              <el-button type="primary" icon="el-icon-edit" size="small" @click="updataLocationdialog(scope.row)">修改</el-button>
              <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteLocation(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

       <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
        </el-pagination>
      </el-card>

      <el-dialog :title="title" :visible.sync="locationDialogVisible" width="65%" @close="closeLocationDialog">

        <el-form :model="locationForm" :rules="rules" ref="locationRuleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="货位名称" prop="name">
            <el-input v-model="locationForm.name" ></el-input>
          </el-form-item>
          <el-form-item label="货位编号" prop="locationId">
            <el-input v-model="locationForm.locationId" :disabled= "locationIdAble" ></el-input>
          </el-form-item>
          <el-form-item label="货位类型" prop="type">
            <el-select v-model="locationForm.type" placeholder="请选择"  >
                <el-option
                  v-for="type in typeList"
                  :key="type.type"
                  :label="type.type"
                  :value="type.type">
                </el-option>
              </el-select>
          </el-form-item>
          <!-- <el-form-item label="货位状态" prop="status">
            <el-select v-model="locationForm.status" placeholder="请选择"  >
                <el-option
                  v-for="type in status"
                  :key="type.value"
                  :label="type.value"
                  :value="type.value">
                </el-option>
              </el-select>
          </el-form-item> -->
          <el-form-item label="所属仓库" prop="storehouse">
            <el-select v-model="locationForm.storehouse" placeholder="请选择"  >
                <el-option
                  v-for="storehouse in storehouseList"
                  :key="storehouse.name"
                  :label="storehouse.name"
                  :value="storehouse.name">
                </el-option>
              </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="locationDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="operationLocation">确 定</el-button>
        </div>
      </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      locationList: [],
      storehouseList: [],
      typeList: [],
      // status:[
      //   {
      //     id:1,
      //     value:'有效'
      //   },
      //   {
      //     id:2,
      //     value:'失效'
      //   }
      // ],
      locationDialogVisible: false,
      title: '新增货位',
      locationIdAble: false,
      // locationForm:'',
      locationForm: {
        name: '',
        locationId: '',
        type: '',
        status: '',
        storehouse: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入货位名称', trigger: 'blur' }
        ],
        locationId: [
          { required: true, message: '请输入货位编号', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入货位类型', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请输入货位状态', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSizeChange (val) {
      this.queryInfo.pageSize = val
      this.getLocationList()
    },
    handleCurrentChange (val) {
      this.queryInfo.pageNum = val
      this.getLocationList()
    },
    async getLocationList () {
      const { data: result } = await this.$http.get('/location/list', { params: this.queryInfo })
      if (result.status !== 200) return this.$message.error('获取列表失败')

      this.total = result.data.total
      this.locationList = result.data.rows
    },
    closeLocationDialog () {
      this.$refs.locationRuleForm.resetFields()
    },
    addLocationDialog () {
      this.title = '新增货位'
      this.locationIdAble = false
      this.locationDialogVisible = true
    },
    updataLocationdialog (location) {
      this.locationForm.name = location.name
      this.locationForm.locationId = location.locationId
      this.locationForm.type = location.type
      this.locationForm.status = location.status
      this.locationForm.storehouse = location.storehouse
      this.title = '修改货位'
      this.locationIdAble = true
      this.locationDialogVisible = true
    },
    addLocation () {
      this.$refs.locationRuleForm.validate(async valid => {
        this.locationForm.status = '空闲'
        const { data: result } = await this.$http.post('/location/addLocation', this.locationForm)
        if (result.status !== 200) return this.$message.error('添加货位失败')
        this.$message.success('成功添加货位')
        this.getLocationList()
        this.locationDialogVisible = false
      })
    },
    async updataLocation () {
      const { data: result } = await this.$http.put('/location/updataLocation', this.locationForm)
      if (result.status !== 200) return this.$message.error('修改货位失败')
      this.$message.success('更新成功')
      this.getLocationList()
      this.locationDialogVisible = false
    },
    operationLocation () {
      if (this.title === '新增货位') return this.addLocation()
      if (this.title === '修改货位') {
        this.updataLocation()
      }
    },
    async deleteLocation (location) {
      if (location.status !== '空闲') return this.$message.error('该仓库中有商品')
      const result = await this.$confirm('此操作将永久删除' + location.name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)
      if (result !== 'confirm') return this.$message.info('用户取消操作')
      const { data: resultDB } = await this.$http.delete(`/location/delete/${location.locationId}`)
      if (resultDB.status !== 200) return this.$message.error('删除库位失败')
      this.getLocationList()
      this.$message.success('库位删除成功')
    },
    async getStorehouse () {
      const { data: result } = await this.$http.get('/location/getStorehouse')
      if (result.status !== 200) return this.$message.error('获取类型列表失败')
      this.storehouseList = result.data
    },
    async geType () {
      const { data: result } = await this.$http.get('/location/getType')
      if (result.status !== 200) return this.$message.error('获取类型列表失败')
      this.typeList = result.data
    }
  },
  mounted () {
    this.getLocationList()
    this.getStorehouse()
    this.geType()
  }
}
</script>

<style>
</style>
